<!DOCTYPE html>
<html lang="en">
    <head>
        <title>主页</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--载入所有的组件资源-->
        <script src="/js/lib/jquery.js"></script>
        <script src="/js/lib/jquery-ui.min.js"></script>
        <script src="/js/lib/jquery.fullPage.js"></script>



        <!--H5:对象 进行内容管理  -->
        <script src='/js/H5.js'></script>
        <link rel="stylesheet" href="/css/H5.css">

        <script src="/js/H5_loading.js"></script>
        <link rel="stylesheet" href="/css/H5_loading.css">

        <!--页面逻辑样式-->
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            .h5_page {
                background-image: url(/images/page_bg.png);
            }
            .h5_page_face {
                background-image: url(/images/face_bg.png);
            }

            .h5_component_name_slogan {
                -webkit-animation: rock 2s infinite 2s;
            }

            .h5_component_name_caption {
                background-image: url(/images/page_caption_bg.png);
                width: 283px;
                height: 160px;
                text-align: center;
                line-height: 140px;
                font-size: 20px;
                color: #fff;
            }
            @-webkit-keyframes rock {
                0% {transform: rotate(0deg)}
                5% {transform: rotate(3deg)}
                10% {transform: rotate(-4deg)}
                15% {transform: rotate(3deg)}
                20% {transform: rotate(-2deg)}
                25% {transform: rotate(1deg)}
                30% {transform: rotate(-1deg)}
                70% {transform: rotate(0deg)}
                100% {transform: rotate(0deg)}

            }
            .h5_component_name_back {
                top : 30px;
                -webkit-animation: back 2s infinite 2s;
            }

            @-webkit-keyframes back {
                50% {top : 20px}
            }
        </style>


    </head>
    <body>
        <div class=loading>
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>

            <div id="rate">0%</div>

        </div>





        <!--加载H5相关资源-->
        <script>
            var res = ['Base','Bar','Bar_v','Point','Polyline','Radar','Pie','Ring'];
            var html = [];
            for(item in res){
                html.push('<script src="/js/H5Component'+res[item]+'.js"><\/script>');
                html.push('<link rel="stylesheet" href="/css/H5Component'+res[item]+'.css">');
            }
            document.write(html.join(''))
        </script>
        <!--主要逻辑-->
        <script>
            $(function () {
                var h5 = new H5();

                h5.whenAddPage = function () {
                    this.addComponent('slide',{
                        bg : '/images/footer.png',
                        css : {
                            opacity : 0,
                            height : 20,
                            width : '100%',
                            left : 0,
                            bottom : -20,
                            zIndex : 999
                        },
                        animateIn : {
                            opacity : 1,
                            bottom : -1
                        },
                        animateOut : {
                            opacity : 0,
                            bottom : -20
                        },
                        delay : 500
                    })
                }
//
//                h5
//                    .addPage('face')
//                        .addComponent('logo',{
//                            center : true,
//                            width : 395,
//                            height : 130,
//                            bg : 'images/face_logo.png',
//                            css : {
//                                opacity : 0
//                            },
//                            animateIn : {
//                                opacity : 1,
//                                top : 100
//                            },
//                            animateOut : {
//                                opacity : 0,
//                                top : 0,
//                            }
//
//                        })
//                        .addComponent('slogan',{
//
//                            center : true,
//                            width : 365,
//                            height : 99,
//                            bg : 'images/face_slogan.png',
//                            css : {
//                                opacity : 0,
//                                top : 180
//                            },
//                            animateIn : {
//                                opacity : 1,
//                                left : '50%'
//                            },
//                            animateOut : {
//                                opacity : 0,
//                                left : '0%'
//                            },
//                            delay : 500
//
//                        })
//                        .addComponent('face_image_left',{
//                            width  : 370,
//                            height : 493,
//                            bg     : 'images/face_img_left.png',
//                            css    : {
//                                opacity : 0,
//                                left : -50,
//                                bottom : -50
//                            },
//                            animateIn : {
//                                opacity : 1,
//                                left : 0,
//                                bottom : 0
//                            },
//                            animateOut : {
//                                opacity : 0,
//                                left : -50,
//                                bottom : -50
//                            },
//                            delay : 1000
//
//                        })
//                        .addComponent('face_image_right',{
//
//                            width : 276,
//                            height : 449,
//                            bg : 'images/face_img_right.png',
//                            css : {
//                                opacity : 0,
//                                right : -50,
//                                bottom : -50
//                            },
//                            animateIn : {
//                                opacity : 1,
//                                right : 0,
//                                bottom : 0
//                            },
//                            animateOut : {
//                                opacity : 0,
//                                right : -50,
//                                bottom : -50
//                            },
//                            delay : 1000
//
//                        })
//                    .addPage()
//                        .addComponent('caption',{text:'核心理念'})
//                        .addComponent('text',{
//                            width : 500,
//                            height : 30,
//                            center : true,
//                            text : 'IT教育网=只学有用的',
//                            css : {
//                                opacity : 0,
//                                textAlign : 'center',
//                                color : 'red',
//                                fontSize : '26px'
//                            },
//                            animateIn : {
//                                opacity : 1,
//                                top : 120
//                            },
//                            animateOut : {
//                                opacity : 0,
//                                top : 240},
//                        })
//                        .addComponent('description',{
//                            width : 521,
//                            height : 351,
//                            center : true,
//                            bg : 'images/description_bg.gif',
//                            css : {
//                                opacity : 0,
//                                padding : '15px 10px 10px 10px',
//                                color : '#fff',
//                                fontSize : '15px',
//                                lineHeight : '18px',
//                                textAlign : 'justify', //两端对齐
//                                top : 240
//                            },
//                            text : '我们把页面的各个功能抽象成一个个组件模块，这样我们只需在搭建好主体'+
//                                   '结构之后便可以独立的开发各个功能组件。组件化可以使得开发变得更为高效，'+
//                                   '更便于做一些单元测试，并且对于后期的维护以及功能的变更修改更加友好。',
//                            animateIn : {
//                                opacity : 1,
//                                top : 180
//                            },
//                            animateOut : {
//                                opacity : 0,
//                                top : 240
//                            },
//                            delay : 500
//                        })
//                        .addComponent('people',{
//                            center : true,
//                            width : 515,
//                            height : 305,
//                            bg : 'images/p1_people.png',
//                            css : {
//                                opacity : 0,
//                                bottom : 0,
//                            },
//                            animateIn : {
//                                opacity : 1,
//                                bottom : 40
//                            },
//                            animateOut : {
//                                opacity : 0,
//                                bottom : 0
//                            },
//                            delay : 1000
//                        })
//                    .addPage()
//                        .addComponent('caption',{text:'课程方向分布'}) //polyline
//                        .addComponent('polyline',{
//                            type : 'polyline',
//                            width : 530,
//                            height: 300,
//                            data  : [
//                                ['JavaScript' , 0.4 , 'skyblue'],
//                                ['HTML/CSS' , 0.1 , 'green'],
//                                ['jQuery' , 0.2 , 'deeppink'],
//                                ['Bootstrap' , 0.05 ,'blue'],
//                                ['VueJS' , 0.35 ,'purple'],
//                            ],
//                            css : {
//                                opacity: 0,
//                                top : 100,
//                                opacity: 0
//                            },
//                            animateIn : {
//                                opacity: 1,
//                                top : 250
//
//                            },
//                            animateOut : {
//                                opacity : 0,
//                                top : 100
//                            },
//                            center : true, //为true时居中且上面的css中的位置样式无效
//                        })
//                        .addComponent('msg',{
//                            text : '前端开发课程站到40%',
//                            css : {
//                                opacity : 0,
//                                width : '100%',
//                                color : '#ff7676',
//                                top : 160,
//                                textAlign : 'center'
//                            },
//                            animateIn : {
//                                opacity : 1
//                            },
//                            animateOut : {
//                                opacity : 0
//                            },
//                            delay : 1800
//                        })
//                    .addPage()
//                        .addComponent('caption',{text:'移动开发课程资源'}) //pie
//                        .addComponent('pie',{
//                            type : 'pie',
//                            width : 400,
//                            height : 400,
//                            data : [
//                                ['Android' , 0.25 , '#ff7676'],
//                                ['IOS' , 0.2 , '#5ddbd8'],
//                                ['Unity-3D' , 0.2 , '#99c1ff'],
//                                ['VR/AR' , 0.2 ,'#ffad69'],
//                                ['Linux' , 0.15 ,'#9A80FF'],
//                                //['AngularJS' , 0.05 , 'pink' ],
//                                //['React' , 0.05 , 'red'],
//                                //['webpack' , 0.1 , 'orange'],
//                            ],
//                            css   : {
//                                top : 100,
//                                opacity: 0
//                            },
//                            animateIn : {
//                                opacity : 1,
//                                top : 200
//
//                            },
//                            animateOut : {
//                                opacity : 0,
//                                top : 100
//                            },
//                            center : true, //为true时居中且上面的css中的位置样式无效
//                        })
//                        .addComponent('msg',{
//                            text : '移动课程 Android 占到 25%',
//                            css : {
//                                opacity : 0,
//                                width : '100%',
//                                color : '#ff7676',
//                                bottom : 100,
//                                textAlign : 'center'
//                            },
//                            animateIn : {
//                                opacity : 1
//                            },
//                            animateOut : {
//                                opacity : 0
//                            },
//                            delay : 1500
//                        })
//                    .addPage()
//                        .addComponent('caption',{text:'前端开发课程'}) //bar(bar_v)
//                        .addComponent('bar',{
//                            type : 'bar',
//                            width : 530,
//                            height : 600,
//                            data : [
//                                ['JavaScript' , 0.4 , '#ff7676'],
//                                ['HTML/CSS' , 0.2 ,''],
//                                ['jQuery' , 0.1 , ''],
//                                ['Bootstrap' , 0.2 ,''],
//                                ['VueJS' , 0.1 ,''],
//                                ['AngularJS' , 0.05 , '' ],
//                                ['React' , 0.09 , ''],
//                            ],
//                            css : {
//                                top : 100,
//                                opacity: 0
//                            },
//                            animateIn : {
//                                opacity: 1,
//                                top : 200
//
//                            },
//                            animateOut : {
//                                opacity : 0,
//                                top : 100
//                            },
//                            center : true, //为true时居中且上面的css中的位置样式无效
//                        })
//                        .addComponent('msg',{
//                            text : '前端课程JavaScript 占到 40%',
//                            css : {
//                                opacity : 0,
//                                width : '100%',
//                                color : '#ff7676',
//                                bottom : 120,
//                                textAlign : 'center'
//                            },
//                            animateIn : {
//                                opacity : 1
//                            },
//                            animateOut : {
//                                opacity : 0
//                            },
//                            delay : 2000
//                        })
//                    .addPage()
//                        .addComponent('caption',{text:'前端开发课程'}) //bar(bar_v)
//                        .addComponent('bar_v',{
//                            type : 'bar_v',
//                            width : 530,
//                            height : 400,
//                            data:[
//                                ['Js' , .4  ,'#ff7676'],
//                                ['CSS3' , .1 ],
//                                ['HTML5' , .2  ],
//                                ['PHP' , .05  ],
//                                ['jQuery' , .35 ]
//                            ],
//                            css : {
//                                top : 220,
//                                opacity : 0
//                            },
//                            animateIn : {
//                                opacity : 1,
//                                top : 200,
//                            },
//                            animateOut : {
//                                opacity : 0,
//                                top : 100,
//                            },
//                            center : true,
//                        })
//                        .addComponent('msg',{
//                            text : '前端课程JavaScript 占到 40%',
//                            css : {
//                                opacity : 0,
//                                width : '100%',
//                                color : '#ff7676',
//                                top : 180,
//                                textAlign : 'center'
//                            },
//                            animateIn : {
//                                opacity : 1
//                            },
//                            animateOut : {
//                                opacity : 0
//                            },
//                            delay : 2000
//                        })
//                    .addPage()
//                        .addComponent('caption',{text:'后端开发课程'}) //radar
//                        .addComponent('radar',{
//                            type  : 'radar',
//                            width : 400,
//                            height: 400,
//                            data  : [
//                                ['JavaScript' , 0.46 , 'skyblue'],
//                                ['HTML/CSS' , 0.95 , 'green'],
//                                ['jQuery' , 0.65 , 'deeppink'],
//                                ['Bootstrap' , 0.86 ,'blue'],
//                                ['VueJS' , 0.75 ,'purple'],
//                                ['AngularJS' , 0.45 , 'pink' ],
//                                ['React' , 0.89 , 'green'],
//                                ['webpack' , 0.69 , 'gray'],
//                            ],
//                            css   : {
//                                top : 100,
//                                opacity: 0
//                            },
//                            animateIn : {
//                                opacity: 1,
//                                top:200
//
//                            },
//                            animateOut : {
//                                opacity: 0,
//                                top:100
//                            },
//                            center : true, //为true时居中且上面的css中的位置样式无效
//                        })
//                        .addComponent('msg',{
//                            text : '课程重点分布',
//                            css : {
//                                opacity : 0,
//                                width : '100%',
//                                color : '#ff7676',
//                                bottom : 80,
//                                textAlign : 'center'
//                            },
//                            animateIn : {
//                                opacity : 1
//                            },
//                            animateOut : {
//                                opacity : 0
//                            },
//                            delay : 2500
//                        })
//                    .addPage()
//                        .addComponent('caption',{text:'课程报名人数过万'}) //ring
//                        .addComponent('ring',{
//                            type : 'ring',
//                            data:[
//                                ['总课程' , 0.7  ,'#ff7676'],
//                            ],
//                            width : 300,
//                            height : 300,
//                            css : {
//                                opacity : 0,
//                                top : 120,
//                                fontSize : '25px'
//                            },
//                            animateIn : {
//                                opacity : 1,
//                            },
//                            animateOut : {
//                                opacity : 0,
//                            },
//                            center : true,
//                        })
//                        .addComponent('msg',{
//                            text : '不同课程报名人数超过一万占比',
//                            css : {
//                                opacity : 0,
//                                width : '100%',
//                                color : '#ff7676',
//                                top : 300,
//                                textAlign : 'center'
//                            },
//                            animateIn : {
//                                opacity : 1
//                            },
//                            animateOut : {
//                                opacity : 0
//                            },
//                            delay : 1800
//                        })
//                        .addComponent('ring-1',{
//                            type : 'ring',
//                            data:[
//                                ['前端开发' , 0.4  ,'#ff8431'],
//                            ],
//                            width : 160,
//                            height : 160,
//                            css : {
//                                opacity:  0,
//                                bottom : 150,
//                                fontSize : '16px',
//                            },
//                            animateIn:{
//                                opacity:1,
//                            },
//                            animateOut:{
//                                opacity:0,
//                            },
//                            center : true
//                        })
//                        .addComponent('ring-2',{
//                            type : 'ring',
//                            data:[
//                                ['后端开发' , 0.3  ,'#42cfa0'],
//                            ],
//                            width : 160,
//                            height : 160,
//                            css : {
//                                opacity:  0,
//                                bottom : 150,
//                                fontSize : '16px',
//                            },
//                            animateIn:{
//                                left : 30,
//                                opacity:1,
//                            },
//                            animateOut:{
//                                opacity:0,
//                            },
//                        })
//                        .addComponent('ring-2',{
//                            type : 'ring',
//                            data:[
//                                ['移动开发' , 0.6  ,'#cf4a4c'],
//                            ],
//                            width : 160,
//                            height : 160,
//                            css : {
//                                opacity:  0,
//                                bottom : 150,
//                                fontSize : '16px',
//                            },
//                            animateIn:{
//                                right : 30,
//                                opacity:1,
//                            },
//                            animateOut:{
//                                opacity:0,
//                            },
//                        })
//                        .addComponent('ring-3',{
//                            type : 'ring',
//                            data:[
//                                ['数据处理' , 0.3  ,'#2c66c8'],
//                            ],
//                            width : 160,
//                            height : 160,
//                            css : {
//                                opacity:  0,
//                                bottom : 40,
//                                fontSize : '16px',
//                            },
//                            animateIn:{
//                                left : 70,
//                                opacity:1,
//                            },
//                            animateOut:{
//                                opacity:0,
//                            },
//                        })
//                        .addComponent('ring-4',{
//                            type : 'ring',
//                            data:[
//                                ['图像处理' , 0.2  ,'#e9c902'],
//                            ],
//                            width : 160,
//                            height : 160,
//                            css : {
//                                opacity:  0,
//                                bottom : 40,
//                                fontSize : '16px',
//                            },
//                            animateIn:{
//                                right : 70,
//                                opacity:1,
//                            },
//                            animateOut:{
//                                opacity:0,
//                            },
//                        })
//                    .addPage()
//                        .addComponent('caption',{text:'课程难度分布'}) //point
//                        .addComponent('poiot',{
//                            type  : 'point',
//                            width : 300,
//                            height: 300,
//                            data  : [
//                                ['高级' , 0.4 , '#42cfa0'],
//                                ['初级' , 0.2 , '#cf4a4c',100,'-60%'],
//                                ['中级' , 0.3 , '#e9c902',100,'130%'],
//                                ['综合' , 0.2 , '#cc5d7a',-10,'120%']
//                            ],
//                            css   : {
//                                bottom: '40%'
//                            },
//
//                            center : true, //为true时居中且上面的css中的位置样式无效
//                        })
//                    .addPage('tail')
//                        .addComponent('logo',{
//                            center : true,
//                            width : 359,
//                            height : 129,
//                            bg : 'images/tail_logo.png',
//                            css : {
//                                opacity : 0,
//                                top : 240,
//                            },
//                            animateIn : {
//                                opacity : 1,
//                                top : 210
//                            },
//                            animateOut : {
//                                opacity : 0,
//                                top : 240
//                            }
//                        })
//                        .addComponent('slogan',{
//                            center : true,
//                            width : 314,
//                            height : 46,
//                            bg : 'images/tail_slogan.png',
//                            css : {
//                                opacity : 0,
//                                top : 280,
//                                left : 0,
//                            },
//                            animateIn : {
//                                opacity : 1,
//                                left : '52%'
//                            },
//                            animateOut : {
//                                opacity : 0,
//                                left : '0%'
//                            },
//                            delay : 500
//                        })
//                        .addComponent('share',{
//                            width : 128,
//                            height : 120,
//                            bg : 'images/tail_share.png',
//                            css : {
//                                opacity : 0,
//                                top : 110,
//                                right : 110,
//                            },
//                            animateIn : {
//                                opacity : 1,
//                                top : 10,
//                                right : 10
//                            },
//                            animateOut : {
//                                opacity : 0,
//                                top : 110,
//                                right : 110,
//                            },
//                            delay : 1000
//                        })
//                        .addComponent('back',{
//                            width : 52,
//                            height : 50,
//                            bg : 'images/tail_back.png',
//                            center : true,
//                            onclick : function () {
//                                $.fn.fullpage.moveTo(1)
//                            }
//                        })

                    $.getJSON('data.json',function (json) {
                        $.each(json, function (i,item) {
                            if (item.isPage){
                                h5.addPage(item.name,item.text);
                            }else {
                                h5.addComponent(item.name,item.cfg)
                            }
                        })
                            h5.loader(['/images/description_bg.gif','/images/face_bg.png','/images/face_img_left.png',
                                '/images/face_img_right.png','/images/face_logo.png','/images/face_slogan.png','/images/footer.png',
                                '/images/p1_people.png','/images/page_bg.png','/images/page_caption_bg.png','/images/tail_back.png',
                                '/images/tail_logo.png','/images/tail_share.png','/images/tail_slogan.png']);
                    })

            })
        </script>

    </body>

</html>